<!--
  Copyright © 2015 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<!-- Control Buttons -->
<div class="btn-group-vertical btn-group-sm zoom-control">
  <button class="btn btn-default"
          ng-click="DAGPlusPlusCtrl.zoomIn()"
          uib-tooltip="Zoom In"
          ng-if="!DAGPlusPlusCtrl.disableNodeClick"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500">
    <i class="fa fa-plus"></i>
  </button>

  <button class="btn btn-default"
          ng-click="DAGPlusPlusCtrl.zoomOut()"
          ng-if="!DAGPlusPlusCtrl.disableNodeClick"
          uib-tooltip="Zoom Out"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500">
    <i class="fa fa-minus"></i>
  </button>

  <button class="btn btn-default"
          ng-click="DAGPlusPlusCtrl.fitToScreen()"
          ng-if="!DAGPlusPlusCtrl.disableNodeClick"
          uib-tooltip="Fit to screen"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500">
    <i class="icon-fit"></i>
  </button>

  <button class="btn btn-default"
          ng-click="DAGPlusPlusCtrl.cleanUpGraph()"
          ng-if="!DAGPlusPlusCtrl.isDisabled"
          uib-tooltip="Align"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500">
    <i class="icon-clean"></i>
  </button>


  <!-- Adding Comments -->
  <button class="btn btn-default"
          ng-click="DAGPlusPlusCtrl.addComment()"
          ng-if="!DAGPlusPlusCtrl.isDisabled"
          uib-tooltip="Add Comments"
          tooltip-append-to-body="true"
          tooltip-placement="left"
          tooltip-popup-delay="500">
    <i class="fa fa-commenting"></i>
  </button>
</div>

<div class="my-js-dag"
    ng-class="{'disabled': DAGPlusPlusCtrl.isDisabled, 'normal-cursor': disableNodeClick }"
    ng-click="DAGPlusPlusCtrl.clearNodeSelection()">

    <div id="diagram-container">
      <div id="dag-container" ng-style="DAGPlusPlusCtrl.panning.style">
        <!--
          The condition on ng-click is to prevent user from being able to click
          if the DAG is disabled. It will prevent the highlighting of nodes on select
        -->
        <div ng-repeat="node in nodes" class="box {{node.type}}" ng-style="node._uiPosition"
               data-type="{{node.type}}"
               id="{{node.name}}"
               ng-click="!disableNodeClick && DAGPlusPlusCtrl.onNodeClick($event, node)"
               ng-class="{'selected': node.selected}">
          <div class="node"
                ng-mouseenter="DAGPlusPlusCtrl.nodeMouseEnter(node)"
                ng-mouseleave="DAGPlusPlusCtrl.nodeMouseLeave(node)">
            <div ng-if="node.error">
              <div class="error-node-notification"
                   ng-if="node.errorCount > 0"
                   uib-tooltip="Please see node configuration panel"
                   tooltip-append-to-body="true"
                   tooltip-class="tooltip-error">
                <span class="badge badge-danger">
                  <span>{{node.errorCount}}</span>
                </span>
              </div>
            </div>
            <div ng-if="!node.error">
              <div class="error-node-notification"
                   ng-if="node.errorCount > 0"
                   uib-tooltip="Please see node configuration panel"
                   tooltip-append-to-body="true"
                   tooltip-class="tooltip-warning">
                <span class="badge badge-warning">
                  <span>{{node.errorCount}}</span>
                </span>
              </div>
            </div>
            <div class="fa fa-close"
                 ng-if="!DAGPlusPlusCtrl.isDisabled"
                 ng-click="DAGPlusPlusCtrl.onNodeDelete($event, node)"></div>
            <div class="icon fa {{node.icon}}"></div>
          </div>
          <div class="plugin-name" ng-bind="node.plugin.label || node.name | myEllipsis: 25"></div>
        </div>

        <div ng-repeat="comment in DAGPlusPlusCtrl.comments"
              class="comment-box"
              ng-click="!DAGPlusPlusCtrl.isDisabled && DAGPlusPlusCtrl.commentSelect($event, comment)"
              ng-style="comment._uiPosition"
              id="{{comment.id}}">
          <div ng-if="comment.isActive">
            <textarea
              ng-model="comment.content"
              class="form-control"
              my-focus-watch="comment.isActive">
            </textarea>
          </div>

          <div class="comment-content"
               ng-if="!comment.isActive"
               marked="comment.content">
          </div>

          <div class="fa fa-close"
               ng-click="DAGPlusPlusCtrl.deleteComment(comment)"
               ng-if="!DAGPlusPlusCtrl.isDisabled">
          </div>

        </div>

      </div>
    </div>
</div>
